<template>
    <div class="index">
        <van-image
        width="100%"
        :src="require('../assets/index.img/alliance.jpg')"
        />
        <div class="show">
            <h3>粥品展示</h3>
            <p>曼玲粥店以餐饮为主，集原料生产，食品研制，教学培训，营销咨询等为一体</p>
        </div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
                <div class="pic1">1</div>
            </van-swipe-item>
            <van-swipe-item>
                <div class="pic2">2</div>
            </van-swipe-item>
            <van-swipe-item>
                <div class="pic3">3</div>
            </van-swipe-item>
        </van-swipe>
        <!-- <van-swipe :autoplay="3000" width="100%">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image" />
            </van-swipe-item>
        </van-swipe> -->
        <div class="alc">
            <span>粥店加盟</span>
            <p>曼玲粥店已经3000+家门店，在上海经营积淀下不断向长三角城市及全国其他城市渗透</p>
            <div class="cenF">
                <div class="cen">
                    <img src="../assets/index.img/icon/icon1.png" alt="">
                    <p>加盟优势</p>
                </div>
                <div class="cen">
                    <img src="../assets/index.img/icon/icon2.png" alt="">
                    <p>加盟流程</p>
                </div>
                <div class="cen">
                    <img src="../assets/index.img/icon/icon3.png" alt="">
                    <p>加盟费用</p>
                </div>
                <div class="cen">
                    <img src="../assets/index.img/icon/icon4.png" alt="">
                    <p>粥加盟店</p>
                </div>    
            </div>
        </div>
        <div class="news">
            <h3>新闻资讯</h3>
            <p>曼玲粥店加盟已开3000+家门店，在上海经营积淀下不断向长三角城市及全国其他城市渗透</p>
            <div class="center">
                <div class="wai">
                    <van-image
                    width="50%"
                    :src="require('../assets/index.img/goods/zhou02.jpg')"
                    />
                    <div class="nei">
                        <span>曼玲粥店加盟投资小开店无压力</span>
                        <div class="btn">更多</div>
                    </div>
                </div>
                <div class="wai">
                   
                    <div class="nei">
                        <span>曼玲粥店加盟投资小开店无压力</span>
                        <div class="btn">更多</div>
                    </div>
                     <van-image
                    width="50%"
                    :src="require('../assets/index.img/goods/zhou02.jpg')"
                    />
                </div>
            </div>
        </div>
        <div class="us">
            <h2>关于我们</h2>
            <p>曼玲粥店自2012年成立以来，在短短的几年里，通过不断自我提 升与创新，已成为上海快餐领域的“新旗帜”，作为上海餐饮界的后 起之秀，曼玲坚持“顾客第一，服务第一，品质第一”的经营理念， 形成了属于曼玲的餐饮新模式。</p>
            <p>创始人邓公断先生和他的团队在立足传统快餐的基础上，勇于突破， 大胆创新，贴近市场与当地口味相结合，融入互联网现代餐饮理念， 提倡更快速，更健康的饮食。</p>
        </div>
    </div>
    
</template>
<script>
export default {
    data() {
        return {
    //          images: [
    //         require('../assets/index.img/banner/zhou01.jpg'),
    //         require('../assets/index.img/banner/zhou06.jpg'),
    //         require('../assets/index.img/banner/zhou10.jpg')
    //   ],
        };
  },
  mounted() {
        this.axios.get('/v1/index').then(result=>{
            console.log(result.data);
        })      
  },
}
</script>
<style scoped>
    .index{
        border: 1px solid #DDE5ED;
        margin-top: 10px;
    }
    .show{
        border-bottom: 1px solid #DDE5ED;
    }
    h3{
        font-size: 30px;
        color: black;
    }  
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        /* background-color: #39a9ed; */
    }
    .my-swipe .van-swipe-item div{
        display: inline-block;
        width: 100%;
        height: 100%;
        background-size:100% auto ;
    }
    .pic1{
        background-image: url('../assets/index.img/banner/zhou01.jpg');
    }
    .pic2{
        background-image: url('../assets/index.img/banner/zhou06.jpg');
    }
    .pic3{
        background-image: url('../assets/index.img/banner/zhou10.jpg');
    }
    .alc{
        width: 100%;
        height: 470px;
        margin-top: 20px;
        text-align: center;
        background-color: rgb(252, 104, 2);
    }
    .cenF{
        height:360px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content:space-around ;
    }
    .cen{
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background-color: white;
        color: #666666;
        font-size: 16px;
        position: relative;
    }
    .cen img{
        position: absolute;
        top: 10%;
        left: 25%;
    }
    .cen p{
        position: absolute;
        left: 28%;
        bottom: 5%;
    }
    .us{

        text-align: left;
    }
    .news .center{
        width: 100%;
        border-top:1px solid #c7c7c7;
        padding-top: 30px;
        padding-bottom: 30px;
        color: #666666;
        font-size: 14px;
        display: flex;
        align-content: center; 
        flex-direction: column;
    }
    .wai{
        width: 80%;
        display: flex;
        margin: 0 auto;
        margin-bottom: 15px;
    }
    .wai .nei{
        box-sizing: border-box;
        width: 50%;
        height: 112px;
        line-height: 25px;
        padding-top: 9%;
        text-align: left;
        padding-right: 5px;
        padding-left: 10px;
    }
    .nei .btn{
        width: 25%;
        height: 20%;
        background-color:rgb(252, 104, 2) ;
        border-radius: 10%;
        padding: 3%;
        color: white;
    }
</style>